﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类C# GridView的编辑效果（二）</title>
    <style type="text/css">
        input {
            font-family: Geneva, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #999999;
            background-color: #FFFFE1;
            border: 1px solid #999999;
        }
    </style>
</head>
<body>
<div id="mydiv"></div>
<table width="80%"  border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" onclick="setEdit(event)" onkeydown="checkAdd(event)">
    <tr>
        <td width="20%">343</td>
        <td width="20%">sdf</td>
        <td width="20%">asdf</td>
        <td width="20%">asf</td>
        <td width="20%">35r32</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
        <td>444</td>
        <td>555</td>
    </tr>
    <tr>
        <td>adfdsf</td>
        <td>adfdsf</td>
        <td>adfsdf  </td>
        <td>   dafssda</td>
        <td>  dafdsf</td>
    </tr>
    <tr>
        <td>2342432</td>
        <td>asdf</td>
        <td> dfsasdfds</td>
        <td>3243243</td>
        <td>asdfasf</td>
    </tr>
    <tr>
        <td>h</td>
        <td>ghhhh</td>
        <td>hhhh</td>
        <td>ea</td>
        <td>ghghhh</td>
    </tr>
</table>
<script language="javascript">
    oldObj="";
    var newInput=document.createElement("input");            //雄怓斐膘怀遺
    newInput.type="text";                                    //怀遺濬倰
    function setEdit(e){                                    //扢离晤憮奀腔袨怓
        var tdObj = e.srcElement? e.srcElement : (e.target ? e.target : e);//等僻腔勤砓
        var obj;
        if(tdObj.tagName && tdObj.tagName=="TD"){           //瓚剿岆瘁岆等啋跡
            if(oldObj!=""){
                var tobj = document.getElementById('tmpText');//瓚剿岆瘁眒冪湔婓怀遺
                oldObj.removeChild(tobj);                       //痄壺眒冪湔婓腔怀遺
                if(newInput.vlaue=="")                          //場宎趙怀遺腔硉
                    oldObj.innerHTML="&nbsp;";
                else
                    oldObj.innerHTML=newInput.value;              //怀遺腔囀脹衾等啋跡腔囀
            }

            obj=tdObj;
            oldObj=obj;
            newInput.width=obj.offsetWidth;                     //怀遺腔詢僅睿遵僅
            newInput.height=obj.offsetHeight;

            newInput.id="tmpText";
            newInput.value=obj.innerHTML;
            obj.innerHTML="";
            obj.appendChild(newInput);                          //蔚怀遺氝樓善等啋跡囀
            newInput.focus();                                   //怀遺鳳腕蝴萸
        }
        tdObj = obj = tobj = null;
    }
    function checkAdd(e){
        if(e && e.keyCode == 13){                               //
            var obj = e.srcElement? e.srcElement : e.target;      //鳳腕等僻勤砓
            var tbl = obj.parentNode.parentNode;                   //等僻勤砓腔逌虜誹萸
            if(oldObj!=""){
                var tobj = document.getElementById('tmpText');  //鳳怀遺
                oldObj.removeChild(tobj);                       //痄壺導怀遺
                if(newInput.vlaue=="")
                    oldObj.innerHTML="&nbsp;";            //等啋跡腔場宎硉
                else
                    oldObj.innerHTML=newInput.value;      //等啋跡腔囀脹衾怀遺腔囀
                var oldObj2 = oldObj;
                oldObj = '';
            }
            if(tbl.tagName && tbl.tagName == 'TR'){          //彆岆等啋俴
                t2 = tbl.cloneNode(true);                      //親癒桶跡
                tbl.parentNode.insertBefore(t2,tbl);           //脣俴
            }
            setEdit(oldObj2);                                  //羲宎晤憮
        }
        obj = tbl = tobj = t2 = oldObj2 = null;
    }
</script>
</body>
</html>